<template>
  <el-dialog v-model="visible" title="平台订单信息" width="900px" class="order-dialog">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" status-icon>
      <div class="section-title">
        <span>客户信息</span>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="receiverName">
              <el-input v-model="form.receiverName" placeholder="请填写客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户电话" prop="receiverPhone">
              <el-input v-model="form.receiverPhone" placeholder="请填写客户电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="下发状态">
              <!-- 添加 el-tag -->
              <template v-if="form.salesmanId">
                <el-space>
                  <el-tag>已下发</el-tag>
                  <el-tag v-if="form.salesmanName" type="success">{{ form.salesmanName }}</el-tag>
                  <el-tag v-if="form.salesmanDept" type="info">{{ form.salesmanDept }}</el-tag>
                </el-space>
              </template>

              <template v-else>
                <el-space alignment="center">
                  <el-tag type="danger">未下发</el-tag>
                </el-space>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收货地址" prop="receiverAddress">
              <el-input
                v-model="form.receiverAddress"
                type="textarea"
                placeholder="请填写收货地址"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 产品信息 -->
      <div class="section-title products">
        <span>产品明细</span>
        <div class="products-content">
          <div
            v-for="(element, index) in form.productCollection"
            :key="index"
            class="product-details-item"
          >
            <el-card shadow="never" class="combo-item-card">
              <template #header>
                <div style="display: flex; align-items: center; gap: 8px">
                  <el-icon class="drag-handle" style="cursor: move; color: #999">
                    <Rank />
                  </el-icon>
                  <span>商品 {{ index + 1 }}</span>
                </div>
              </template>

              <el-row>
                <el-col :span="4" class="item-image-preview">
                  <el-image
                    :src="element.productImage"
                    style="width: 60px; height: 60px; border-radius: 4px"
                    fit="cover"
                    :preview-src-list="[element.productImage]"
                    hide-on-click-modal
                  >
                    <template #error>
                      <img
                        src="~@/assets/images/goodsErrorIcon.png"
                        style="width: 60px; height: 60px; border-radius: 4px"
                        alt=""
                        srcset=""
                      />
                    </template>
                  </el-image>
                </el-col>
                <el-col :span="20">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label="商品"
                        :prop="'items.' + index + '.productId'"
                        label-width="60px"
                      >
                        {{ element.productName }}
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item
                        label="数量"
                        :prop="'items.' + index + '.quantity'"
                        label-width="60px"
                      >
                        <el-input-number
                          :min="1"
                          :max="999"
                          v-model="element.totalUnitNum"
                          :controls="false"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8"> </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </div>
      </div>

      <!-- 订单信息 -->
      <div class="section-title">
        <span>订单信息</span>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单编号" prop="orderNo">
              <el-input v-model="form.orderNo" disabled placeholder="请填写订单号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单时间" prop="orderTime">
              <el-date-picker
                v-model="form.orderTime"
                type="datetime"
                disabled
                placeholder="选择订单时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单来源" prop="channelType">
              <el-input v-model="form.channelType" disabled placeholder="请填写订单来源" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="物流公司" prop="logistics">
              <el-select
                v-model="form.logisticsPlatform"
                placeholder="请选择物流公司"
                :options="logisticsCompany"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单金额" prop="orderPrice">
              <el-input v-model="form.orderPrice" disabled placeholder="请填写订单金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实付金额" prop="actualPrice">
              <el-input v-model="form.actualPrice" placeholder="请填写实付金额" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="支付方式" prop="paymentName">
              <el-radio-group v-model="form.paymentMethod" placeholder="请选择付款方式">
                <el-radio v-for="pay in payType" :value="pay.value">{{ pay.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="订单内容" prop="orderContent">
          <el-input v-model="form.orderContent" type="textarea" placeholder="请填写订单内容" />
        </el-form-item>

        <el-form-item label="订单备注">
          <el-input v-model="form.orderRemark" type="textarea" placeholder="请填写订单备注" />
        </el-form-item>
      </div>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit" :loading="submitLoading">提交</el-button>
        <el-button @click="hide">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { Edit } from '@element-plus/icons-vue';
import { updateOrder } from '../../api/platformOrders/orders/list';
import { ElMessage } from 'element-plus';

const emits = defineEmits(['ok']);

const visible = ref(false);
const formRef = ref();
// props
interface Option {
  value?: any;
  label?: string;
  [key: string]: any;
}

withDefaults(
  defineProps<{
    logisticsCompany?: Option[];
    payType?: Option[];
  }>(),
  {
    // 物流公司
    logisticsCompany: () => [],
    // 支付方式
    payType: () => []
  }
);

const form = ref({
  receiverName: '',
  receiverPhone: '',
  receiverAddress: '',
  productCollection: [] as any,
  orderNo: '',
  logisticsPlatform: '', //
  paymentName: '',
  paymentMethod: '',
  orderTime: '',
  business: '',
  channelType: '',
  orderPrice: '',
  actualPrice: '',
  logistics: '',
  orderContent: '',
  orderRemark: '',
  salesmanId: '',
  salesmanName: '',
  salesmanDept: ''
});

const rules = {
  receiverName: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
  receiverPhone: [{ required: true, message: '请输入客户电话', trigger: 'blur' }],
  receiverAddress: [{ required: true, message: '请输入收货地址', trigger: 'blur' }],
  orderNo: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
  orderTime: [{ required: true, message: '请选择订单时间', trigger: 'change' }],
  orderPrice: [{ required: true, message: '请输入订单金额', trigger: 'blur' }],
  actualPrice: [{ required: true, message: '请输入实付金额', trigger: 'blur' }]
};

function show(data?: any) {
  if (data) {
    form.value = { ...form.value, ...data };
  }
  visible.value = true;
}
function hide() {
  visible.value = false;
}
const submitLoading = ref(false);
function submit() {
  formRef.value.validate((valid: boolean) => {
    if (!valid) return;
    submitLoading.value = true;
    updateOrder(form.value)
      .then((res: any) => {
        if (res.code === 200) {
          emits('ok');
          ElMessage.success('更新成功');
          hide();
        }
      })
      .catch((err: any) => {
        ElMessage.error(err.message);
      })
      .finally(() => {
        submitLoading.value = false;
      });
  });
}

defineExpose({ show, hide });
</script>

<style lang="scss" scoped>
.order-dialog {
  .section-title {
    border: 1px solid #ebebeb;
    padding-right: 20px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-radius: 4px;

    & > span {
      display: inline-block;
      padding: 5px 10px;
      background: #ebebeb;
      font-size: 13px;
      margin-bottom: 10px;
      border-radius: 0 4px 4px 0;
    }

    // :deep(.el-form-item--default) {
    //   margin-bottom: 10px !important;
    // }
  }

  .products {
    .products-content {
      padding: 0 0 10px 20px;
    }

    :deep(.el-form-item) {
      margin-bottom: 10px;
    }
  }

  .product-details-item {
    margin-bottom: 0px;

    .item {
      margin-bottom: 10px;
      padding-right: 10px;
      text-align: right;

      font: {
        weight: 500;
        size: 14px;
      }
    }
  }

  .add-production {
    margin-top: 5px;
    padding: 4px;
    border: 2px dashed #dcdfe6;
    color: #666;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      border-color: #409eff;
      color: #409eff;
    }

    div {
      margin-left: 5px;
    }
  }

  .dialog-footer {
    text-align: center;
  }
}
</style>

<style lang="scss">
.text-center {
  display: flex;
  justify-content: center;
  align-items: center;

  .el-form-item__content {
    justify-content: center;
  }

  .icon {
    font-size: 22px;
    color: #f56c6c;
  }
}
</style>
